<template>
  <view class="page">

    <view class="publish-demand-wrapper">

      <view class="input_box">
        <view class="input_box_title">

          <span style="color: #191919;font-size: 28upx;margin-left: 18upx;">姓名</span>
        </view>
        <input type="text"  maxlength="15" v-model="formData.name"
               placeholder="请输入姓名"/>
      </view>


      <view class="input_box">
        <view class="input_box_title">


          <span style="color: #191919;font-size: 28upx;margin-left: 18upx;">工作经验</span>
        </view>
        <input type="text"  maxlength="15"
               v-model="formData.experience"
               placeholder="请输入工作经验"/>
      </view>

      <view class="input_box">
        <view class="input_box_title">

          <span style="color: #191919;font-size: 28upx;margin-left: 18upx;">价格</span>
        </view>
        <input type="text"  maxlength="15" v-model="formData.price"
               placeholder="请输入价格"/>
      </view>


      <view class="input_box">
        <view class="input_box_title">

          <span style="color: #191919;font-size: 28upx;margin-left: 18upx;">手机号</span>
        </view>
        <input type="text"  maxlength="15" v-model="formData.mobile"
               placeholder="请输入手机号"/>
      </view>


      <view class="input_box">
        <view class="input_box_title">

          <span style="color: #191919;font-size: 28upx;margin-left: 18upx;">身份证</span>
        </view>
        <input type="text" maxlength="15" v-model="formData.idCard"
               placeholder="请输入身份证"/>
      </view>

    </view>


    <view style="background: #FFFFFF;margin-top: 30upx;">

			<textarea style="padding: 30upx 0 0 30upx;color: #191919;height: 272upx;width: 95%;" maxlength="1000"
                v-model="formData.specialty" value="" placeholder="请输入个人介绍~"/>
      <view style="margin-left: 30upx;">
        <view style="color: #B7B8BB;font-size: 28upx;">请上传健康证(必填)</view>
      </view>

      <view style="display: flex;flex-direction: row;align-items: center;">
        <image style="width: 160upx;height: 160upx;margin-top: 26upx;margin-bottom: 30upx;margin-left: 30upx;"
               src="@/static/img/publish-img-icon.png" mode="" @click="uploadImgLocal"></image>
        <view style="display: flex;flex-direction: row;position: relative;"
              v-for="(item,index) in uploadImgList" :key="index">


          <image :src="item" @tap="previewImg(index)"
                 style="width: 160upx;height: 160upx;border-radius: 12upx;margin-left: 16upx;" mode="aspectFill">
          </image>
          <view style="background: #000000;border-radius: 16upx;width: 32upx;height: 32upx;line-height: 32upx;
					position: absolute;left: 75%;top: 8%;
					text-align: center;opacity:0.6" @click="removeImg(index)">
            <span style="color: #FFFFFF;width: 14upx;height: 14upx;">×</span>
          </view>
        </view>

      </view>

    </view>

    <view style="position: fixed;bottom: 0upx;margin-bottom: 68upx;padding: 0 30upx;" @click="publish">
      <view style="width: 690upx;height: 80upx;background: #E9A06F;border-radius: 40upx;
			text-align: center;line-height: 80upx;">提交
      </view>
    </view>

  </view>
</template>

<script>

import {chef_verify} from "@/api/chef";



export default {
  data() {
    return {
      uploadImgList: [],
      imgList: [],
      formData: {}
    }
  },

  methods: {

    previewImg(index) {
      console.log("index:" + index)
      let imgsArray = [];
      for (let i = 0; i < this.uploadImgList.length; i++) {
        imgsArray.push(this.uploadImgList[i]);

      }
      uni.previewImage({
        current: index,
        urls: imgsArray,
        indicator: 'number',
        loop: true,
        longPressActions: {
          itemList: ['保存图片'],
          success(res) {
            console.log(res)
            uni.downloadFile({
              url: this.uploadImgList[index],
              success(result) {
                uni.saveImageToPhotosAlbum({
                  filePath: result.tempFilePath,
                  success() {
                    uni.showToast({
                      title: '保存成功'
                    })
                  }
                })
              }
            })
          }
        }
      });
    },
    removeImg(index) {
      const temArray = [];
      for (let i = 0; i < this.uploadImgList.length; i++) {
        if (i !== index) {
          temArray.push(this.uploadImgList[i])
        }
      }
      this.uploadImgList = temArray

    },
    uploadImgLocal() {
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          console.log(tempFilePaths)
          this.uploadImgList = tempFilePaths
        }
      })
    },
    uploadImgs() {
      const arr = []

      const _this = this
      for (let i = 0; i < this.uploadImgList.length; i++) {
        const a = new Promise(reslut => {
          uni.uploadFile({
            url: 'http://localhost:8901/common/upload/file',
            filePath: this.uploadImgList[i],
            name: 'file',
            success(res) {
              _this.imgList.push(JSON.parse(res.data).data)
              reslut()
            }
          })
        })
        arr.push(a)
      }
      return Promise.all(arr)
    },
    publish() {
      let params = this.formData
      uni.showLoading({
        title: '发布中~',
        mask: true
      })
      this.uploadImgs().then(() => {
        params.healthCardList = this.imgList
        chef_verify(params).then(res => {
          if (res.code === '200') {
            uni.hideLoading()
            uni.showToast({
              title: '提交成功'
            })
            setTimeout(() => {
              uni.navigateBack({})
            }, 500)
          } else {
            uni.showToast({
              title: res.message
            })
          }
        })
      })
    },

  }
}
</script>

<style scoped lang="scss">
.page {
  color: #F8F8F8;
}

.publish-demand-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 24upx;
  gap: 16upx;
  padding: 0 24upx;
  background: #FFFFFF;
  .input_box {
    width: 100%;
    height: 80upx;
    border-radius: 16upx;
    border: #8d8d8d 1px solid;
    display: flex;
    align-items: center;

    .input_box_title{
      width: 20%;
    span{
      width: 4em; // 当前每行最多文字
      display: inline-block;
      text-align-last: justify;
    }
    }

    input{
      width: 100%;
      height: 100%;
      text-align: center;
      color: #3b4144;
    }
  }


}



</style>